import React, { useContext, useEffect, useRef } from "react";

import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Image,
  Dimensions,
  Animated,
  Alert,
} from "react-native";
import { useState } from "react";
import { Entypo } from "@expo/vector-icons";
import { AntDesign } from "@expo/vector-icons";
import { MaterialIcons } from "@expo/vector-icons";
import { fileWeb } from "../api/query";
import { AMAZON_URL } from "../api/query";
import Swipeable from "react-native-gesture-handler/Swipeable";
import GoodsContext from "../context/suppiler/goodsContext";
import LoadingBar from "./LoadingBar";

const GoodsCard = ({
  onQuery,
  showData,
  isMutilDelete,
  index,
  onPressSelect,
}) => {
  console.log("showData---", showData);
  const [selected, setSelected] = useState(false); //批量删除
  const width = Dimensions.get("window").width;

  const { deleteGoods } = useContext(GoodsContext);
  const swipeableRef = useRef(null);
  const [isLoading, setIsLoading] = useState(false);
  // useEffect(() => {
  //   console.log(fileWeb + "/" + showData.image[0].filePath);
  //   console.log("----");
  // }, []);

  const [isVisible, setIsvisible] = useState(false); //详细信息

  const confirmDelete = () => {
    Alert.alert("提示", "要删除这个商品吗?", [
      {
        text: "取消",
        onPress: () => console.log("Cancel Pressed"),
        style: "cancel",
      },
      {
        text: "确定",
        onPress: () => {
          setIsLoading(true);
          deleteGoods(showData, () => {
            setIsLoading(false);
          });
        },
      },
    ]);
  };

  const normalCard = (showData) => {
    return (
      <View style={styles.detail}>
        <LoadingBar visible={isLoading} />
        <View style={{ flexDirection: "row", justifyContent: "flex-end" }}>
          <TouchableOpacity
            style={{ marginRight: 15 }}
            onPress={() => {
              onQuery();
            }}
          >
            <AntDesign name="edit" size={15} color="#6495ed" />
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => {
              confirmDelete(showData._id);
            }}
          >
            <AntDesign name="delete" size={15} color="orange" />
          </TouchableOpacity>
        </View>

        <View style={styles.detailItem}>
          <Text style={styles.detailText}>
            基板: {showData.baseplate.category + showData.baseplate.type}
          </Text>
        </View>
        <View style={styles.detailItem}>
          <Text style={styles.detailText}>
            密度: {showData.baseplate.density} g/m³
          </Text>
        </View>
        <View style={styles.detailItem}>
          <Text style={styles.detailText}>
            原料费: {showData.baseplate.m_cost}
          </Text>
          {showData.baseplate.processMode === "1" ? (
            <Text style={styles.detailText}> 元/kg </Text>
          ) : (
            <Text style={styles.detailText}> 元/㎡ </Text>
          )}
        </View>
        <View style={styles.detailItem}>
          <Text style={styles.detailText}>
            加工费: {showData.b_process.price}
          </Text>
          {showData.b_process.processMode === "1" ? (
            <Text style={styles.detailText}> 元/kg </Text>
          ) : (
            <Text style={styles.detailText}> 元/㎡ </Text>
          )}
        </View>
        <View style={{ height: 10 }}></View>
        <View style={styles.detailItem}>
          <Text style={styles.detailText}>
            覆板: {showData.shroudplate.category + showData.shroudplate.type}
          </Text>
        </View>
        <View style={styles.detailItem}>
          <Text style={styles.detailText}>
            密度: {showData.shroudplate.density} g/m³
          </Text>
        </View>
        <View style={styles.detailItem}>
          <Text style={styles.detailText}>
            原料费: {showData.shroudplate.m_cost}
          </Text>
          {showData.shroudplate.processMode === "1" ? (
            <Text style={styles.detailText}> 元/kg </Text>
          ) : (
            <Text style={styles.detailText}> 元/㎡ </Text>
          )}
        </View>
        <View style={styles.detailItem}>
          <Text style={styles.detailText}>
            加工费: {showData.s_process.price}
          </Text>
          {showData.s_process.processMode === "1" ? (
            <Text style={styles.detailText}> 元/kg </Text>
          ) : (
            <Text style={styles.detailText}> 元/㎡ </Text>
          )}
        </View>
      </View>
    );
  };

  return (
    <View>
      <View style={styles.container}>
        {isMutilDelete && (
          <TouchableOpacity
            style={styles.delete}
            onPress={() => {
              let i = !selected;
              setSelected(i);
              if (i) {
                onPressSelect(index, 0);
              } else {
                onPressSelect(index, 1);
              }
            }}
          >
            {selected ? (
              <AntDesign name="checkcircleo" size={15} color="#67c23a" />
            ) : (
              <Entypo name="circle" size={15} color="#D8D8D8" />
            )}
          </TouchableOpacity>
        )}

        <TouchableOpacity
          style={styles.card}
          onPress={() => setIsvisible(!isVisible)}
        >
          <AntDesign name="isv" size={20} color="orange" />
          <Text style={styles.text}>{showData.title}</Text>
          <Text style={styles.text}>{showData.shape}</Text>
          {isVisible ? (
            <Entypo name="chevron-small-down" size={20} color="#555" />
          ) : (
            <Entypo name="chevron-small-right" size={20} color="#555" />
          )}
        </TouchableOpacity>
      </View>
      {isVisible ? normalCard(showData) : null}
    </View>
  );
};

const styles = StyleSheet.create({
  card: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    backgroundColor: "#fff",
    marginRight: 15,
    marginLeft: 15,
    padding: 13,
    paddingLeft: 10,
    borderRadius: 5,
    marginBottom: 10,
    elevation: 4, //设置阴影角度，通过这个设置有无阴影
    shadowOffset: {
      // 设置阴影偏移量
      width: 0,
      height: 4,
    },
    shadowRadius: 4, // 设置阴影模糊半径
    shadowOpacity: 0.1, // 设置阴影的不透明度
    shadowColor: "gray", // 设置阴影色
    flex: 9,
  },
  container: {
    // backgroundColor: "#ddd",
    flexDirection: "row",
    justifyContent: "space-between",
    // alignItems: "center",
  },
  delete: {
    flex: 1,
    alignSelf: "center",
    // backgroundColor: "yellow",
    paddingBottom: 10,
    paddingLeft: 10,
    marginLeft: 5,
    marginRight: -15,
  },
  text: {
    fontSize: 16,
    color: "#333",
  },
  detail: {
    backgroundColor: "#fff",
    elevation: 4, //设置阴影角度，通过这个设置有无阴影
    shadowOffset: {
      width: 0,
      height: 4,
    },
    shadowRadius: 4, // 设置阴影模糊半径
    shadowOpacity: 0.1, // 设置阴影的不透明度
    shadowColor: "gray", // 设置阴影色
    marginBottom: 20,
    marginLeft: 25,
    marginRight: 25,
    borderRadius: 10,
    padding: 10,
  },

  detailText: {
    fontSize: 15,
    color: "#333",
  },
  detailItem: {
    // flexDirection: "row",
    // justifyContent: "space-between",
    padding: 3,
    marginLeft: 10,
    marginRight: 5,
    alignContent: "center",
    flexDirection: "row",
  },
});

export default GoodsCard;

// import React, { useContext, useEffect, useRef } from "react";

// import {
//   StyleSheet,
//   Text,
//   View,
//   TouchableOpacity,
//   Image,
//   Dimensions,
//   Animated,
//   Alert,
// } from "react-native";
// import { useState } from "react";
// import { Entypo } from "@expo/vector-icons";
// import { AntDesign } from "@expo/vector-icons";
// import { MaterialIcons } from "@expo/vector-icons";
// import { fileWeb } from "../api/query";
// import { AMAZON_URL } from "../api/query";
// import Swipeable from "react-native-gesture-handler/Swipeable";
// import GoodsContext from "../context/suppiler/goodsContext";
// import LoadingBar from "./LoadingBar";

// const GoodsCard = ({
//   onQuery,
//   showData,
//   isMutilDelete,
//   index,
//   onPressSelect,
//   onDelete,
// }) => {
//   const [selected, setSelected] = useState(false); //批量删除
//   const width = Dimensions.get("window").width;

//   const { deleteGoods } = useContext(GoodsContext);
//   const swipeableRef = useRef(null);
//   const [isLoading, setIsLoading] = useState(false);
//   // useEffect(() => {
//   //   console.log(fileWeb + "/" + showData.image[0].filePath);
//   //   console.log("----");
//   // }, []);

//   const confirmDelete = () => {
//     Alert.alert("提示", "要删除这个商品吗?", [
//       {
//         text: "取消",
//         onPress: () => console.log("Cancel Pressed"),
//         style: "cancel",
//       },
//       {
//         text: "确定",
//         onPress: () => {
//           swipeableRef.current.close();
//           setIsLoading(true);

//           deleteGoods(showData, () => {
//             setIsLoading(false);
//           });
//         },
//       },
//     ]);
//   };

//   const onPress = () => {
//     confirmDelete();
//   };

//   const RightSwipe = (progress, dragX) => {
//     const scale = dragX.interpolate({
//       inputRange: [-70, 0],
//       outputRange: [1, 0.5],
//       extrapolate: "clamp",
//     });
//     const opacity = dragX.interpolate({
//       inputRange: [-70, 0],
//       outputRange: [0.9, 0.3],
//       extrapolate: "clamp",
//     });
//     return (
//       <TouchableOpacity onPress={onPress}>
//         <Animated.View style={[styles.deleteContainer, { opacity }]}>
//           <Animated.View style={{ transform: [{ scale }] }}>
//             <MaterialIcons name="delete-outline" size={24} color="white" />
//           </Animated.View>
//         </Animated.View>
//       </TouchableOpacity>
//     );
//   };

//   return (
//     <Swipeable
//       ref={swipeableRef}
//       renderRightActions={RightSwipe}
//       friction={1}
//       overshootRight={false}
//     >
//       {isMutilDelete && (
//         <TouchableOpacity
//           style={styles.Multidelete}
//           onPress={() => {
//             let i = !selected;
//             setSelected(i);
//             if (i) {
//               onPressSelect(index, 0);
//             } else {
//               onPressSelect(index, 1);
//             }
//           }}
//         >
//           {selected ? (
//             <AntDesign name="checkcircleo" size={15} color="#67c23a" />
//           ) : (
//             <Entypo name="circle" size={15} color="#D8D8D8" />
//           )}
//         </TouchableOpacity>
//       )}

//       <TouchableOpacity onPress={onQuery} style={styles.container}>
//         <LoadingBar visible={isLoading} />
//         <View style={{ flex: 2, marginLeft: 20 }}>
//           {typeof showData.image[0].filePath === "undefined" ? (
//             <Image
//               style={styles.imageStyle}
//               source={{ uri: AMAZON_URL + "/" + showData.image[0] }}
//             />
//           ) : (
//             <Image
//               style={styles.imageStyle}
//               source={{ uri: fileWeb + "/" + showData.image[0].filePath }}
//             />
//           )}
//         </View>
//         <View style={{ flex: 5, justifyContent: "space-around" }}>
//           <View>
//             <Text style={styles.itemTitle}>{showData.title}</Text>
//           </View>
//           <View style={styles.item}>
//             <View style={styles.tag}>
//               <Text style={styles.itemDetail}>{showData.shape}</Text>
//             </View>

//             <Text style={styles.itemDetail}>{"详情 >"}</Text>
//           </View>
//         </View>
//       </TouchableOpacity>
//     </Swipeable>
//   );
// };

// const styles = StyleSheet.create({
//   page: {
//     flexDirection: "row",
//     justifyContent: "center",
//     flex: 1,
//   },
//   container: {
//     flexDirection: "row",
//     padding: 10,
//     paddingLeft: 20,
//     justifyContent: "center",
//     backgroundColor: "#FAFAFA",
//   },

//   imageStyle: {
//     width: 80,
//     height: 80,
//   },
//   itemView: {
//     flexDirection: "row",
//   },
//   itemTitle: {
//     fontSize: 17,
//     fontWeight: "bold",
//     marginTop: 10,
//     marginLeft: 20,
//   },
//   itemPrice: {
//     fontSize: 16.5,
//     fontWeight: "bold",
//     color: "red",
//     marginTop: 10,
//     marginLeft: 20,
//   },
//   itemDetail: {
//     fontSize: 13,
//     // marginTop: 17,
//     // marginLeft: 75,
//     color: "#777",
//   },
//   item: {
//     // marginTop: 17,
//     // marginLeft: 55,
//     flexDirection: "row",
//     justifyContent: "space-between",
//     marginRight: 30,
//     marginLeft: 20,
//   },
//   Multidelete: {
//     padding: 10,
//     paddingTop: 35,
//     paddingBottom: 30,
//     position: "absolute",
//     top: 10,
//     zIndex: 5,
//     // backgroundColor: "yellow",
//   },
//   deleteContainer: {
//     backgroundColor: "#FE2E2E",
//     height: 100,
//     justifyContent: "center",
//     alignItems: "center",
//     alignSelf: "center",
//     width: 70,
//     flexDirection: "row",
//   },
//   separator: {
//     // flex: 1,
//     width: "90%",
//     height: 1,
//     backgroundColor: "#e4e4e4",
//     marginLeft: 10,
//     marginRight: 10,
//   },
//   tag: {
//     padding: 1,
//     paddingLeft: 5,
//     paddingRight: 5,
//     // borderRadius: 5,
//     borderColor: "orange",
//     borderWidth: 1,
//   },
// });

// export default GoodsCard;
